import React from 'react';
import './index.less'
export interface ISortItem {
    key: string;
    label: string;
    ascText: string;
    descText: string;
}
export interface ISelectedSort {
    key: string;
    sort: string;
}
interface IProps {
    sortConfig: ISortItem[];
    selectedSort: ISelectedSort;
    changeSort: Function;
}

export default React.memo((props: IProps) => {
    const { sortConfig, selectedSort, changeSort } = props;
    const toggleSort = (item: ISortItem) => {
        if (selectedSort.key !== item.key) {
            changeSort({
                key: item.key,
                sort: 'asc'
            })
        } else {
            changeSort({
                key: item.key,
                sort: selectedSort.sort === 'asc' ? 'desc' : 'asc'
            })
        }
    }
    return (
        <div className="sort-list flex">
            {sortConfig.map((item) => (
                <div className={`sort-item ${selectedSort.key === item.key && 'active-item'}`} key={item.key} onClick={() => toggleSort(item)}>
                    {selectedSort.key !== item.key && <div>{item.label}</div>}
                    {selectedSort.key === item.key && selectedSort.sort === 'asc' && <div>{item.ascText}</div>}
                    {selectedSort.key === item.key && selectedSort.sort === 'desc' && <div>{item.descText}</div>}
                </div>
            ))}
        </div>
    );
});
